<template>
    <div>
        <div class="layout-content-breadcrumb">
            <Breadcrumb>
                <Breadcrumb-item>系统管理</Breadcrumb-item>
                <Breadcrumb-item>意见反馈</Breadcrumb-item>
            </Breadcrumb>
        </div>
        <div class="page-content">
            <Table :columns="columns" :data="dataSource"></Table>
            <div class="table-paging">
                <Page :total="totalNumber" :current="page" :page-size="pageSize" show-total @on-change="onPageChange"></Page>
            </div>
            <Modal
                    v-model="replyModal.showModal"
                    title="回复"
                    :loading="false"
                    @on-ok="onSureReply">
                <Input type="textarea" v-model="replyModal.content" placeholder="请输入回复内容">
                </Input>
            </Modal>
        </div>
    </div>
</template>
<style lang="less">

</style>
<script>
    import api from 'service/system'
    export default{
        data(){
            return {
                page:1,
                pageSize:10,
                totalNumber: 0,
                columns: [
                    {
                        title: '用户昵称',
                        key: 'nick',
                        render:(h,params)=>{
                            return params.row.user.nick
                        }
                    },
                    {
                        title: '主题',
                        key: 'title'
                    },
                    {
                        title: '反馈内容',
                        key: 'content'
                    },
                    {
                        title: '联系方式',
                        key: 'contact_way'
                    },
                    {
                        title: '反馈时间',
                        key: 'created_at'
                    }
                ],
                dataSource: [],
                replyModal:{
                    showModal:false,
                    customerId:'',
                    content:''
                }
            }
        },
        mounted(){
            this.onPageChange(1)
        },
        methods: {
            onShowContent(row){
                this.$Modal.info({
                    title:row.title,
                    content:row.message
                })
            },
            onReply(row){
                this.replyModal.id=row.id
                this.replyModal.content=''
                this.replyModal.showModal=true
            },
            onSureReply(){
                let content=this.replyModal.content.trim()
                if(!content){
                   return this.$Message.warning('内容不能为空!')
                }
                api.replyFeedback({
                    id:this.replyModal.id,
                    content:content
                }).then(()=>{
                    this.$Message.success('回复成功！')
                    this.replyModal.showModal=false
                    this.onPageChange(this.page)
                })
            },
            onPageChange(page){
                this.page=page
                api.getFeedback({
                    page: page,
                    per_page: this.pageSize
                }).then(({data}) => {
                    this.dataSource = data.list || []
                    this.totalNumber = Number(data.total_count)
                })
            }
        }
    }
</script>
